<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >社区购物</el-breadcrumb-item>
            <el-breadcrumb-item >商品详情 / {{$route.params.goodid}} <el-button size="mini" type="primary" @click="$router.go(-1)">返回</el-button></el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="margintop20" v-if="detail">
            <el-col :span="8" :offset="1">
                <img :src="detail.img" class="boximg" alt="">
            </el-col>
            <el-col :span="8" :offset="1" style="font-size:14px">
                <el-link>{{detail.name}}</el-link>
                <p style="color:#67C23A">分类：{{detail.type.text}}</p>
                <h6>单价：<span style="color:#F56C6C">￥{{detail.price}}</span> </h6>
                <h6>折扣：<span style="color:#303133">{{detail.discount}}</span></h6>
                <div class="margintop20">
                    <span style="color:#303133">购买数量:</span>
                    <el-input-number v-model="count" :min="1"></el-input-number>
                </div>
                <div class="margintop20">
                    <el-button type="success" size="mini" @click="add">加入购物车</el-button>
                     <el-button type="danger" size="mini">查看我的商品</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getgoodone,addtocart} from "@/api"
export default {
    data(){
        return {
            detail:null,
            count:1
        }
    },
    methods:{
        add(){
            addtocart({
                goodid:this.$route.params.goodid,
                good:this.detail,
                count:this.count
            })  
            .then(res=>{

            })
        }
    },
    mounted(){
        getgoodone({
            _id:this.$route.params.goodid
        })
        .then(res=>{
            console.log(res)
            this.detail = res.result
        })
    }
}
</script>


<style lang="scss" scoped>
.boximg{
    height:300px;
    width:100%;
}
</style>